Web Design
Angular 5 Updates and Components
Angular 5 Features and Changes
Angular 5 Material and Universal Components
Bootstrap and Dashboards with Angular 5

Angular 5 Features and Changes

Course Number:
sd_angf_a01_it_enus
Lesson Objectives

Angular 5 Features and Changes

  • start the course
  • describe the new features of Angular 5 and the features that are deprecated from previous Angular versions
  • use i18n in an Angular 5 app that is compiled ahead of time
  • use i18n in an Angular 5 app that is compiled just in time
  • use i18n in an Angular app to provide singular and plural translations
  • work with the updated currency, percent, and date pipes
  • define multiple names in exportAs to support backward compatibility
  • configure and use the new Router Activation Start/End Events
  • use the new min and max directives for form input validation
  • recognize and work with the new NgTemplateOutlet API
  • create a reusable component for doing lookups using the NgTemplateOutlet API
  • work with the Animation aliases :increment and :decrement
  • work with the improved @.disabled property and improved error handling for Angular 5 animations
  • perform HTTP operations using the HttpClient API rather than the HTTP API
  • use the new interceptors provided by HttpClient
  • work with updateOn to delay form validation for template driven forms
  • work with updateOn to delay form validation for reactive forms
  • use Angular CLI to set up an app with service worker support
  • set up caching of external resources and data
  • perform a lazy load of an Angular module
  • use the new features and capabilities of Angular 5

Overview/Description
Angular 5 is an update to Angular 4 that contains some very powerful new features and capabilities, as well as several bug fixes. In this course, you will learn about the new features of Angular 5.

Target Audience
Angular developers, web designers, and architects building or designing web sites using Angular 5 or upgrading a site to Angular 5

Angular 5 Features and Changes

Course Number:
sd_angf_a01_it_enus
Lesson Objectives

Angular 5 Features and Changes

  • start the course
  • describe the new features of Angular 5 and the features that are deprecated from previous Angular versions
  • use i18n in an Angular 5 app that is compiled ahead of time
  • use i18n in an Angular 5 app that is compiled just in time
  • use i18n in an Angular app to provide singular and plural translations
  • work with the updated currency, percent, and date pipes
  • define multiple names in exportAs to support backward compatibility
  • configure and use the new Router Activation Start/End Events
  • use the new min and max directives for form input validation
  • recognize and work with the new NgTemplateOutlet API
  • create a reusable component for doing lookups using the NgTemplateOutlet API
  • work with the Animation aliases :increment and :decrement
  • work with the improved @.disabled property and improved error handling for Angular 5 animations
  • perform HTTP operations using the HttpClient API rather than the HTTP API
  • use the new interceptors provided by HttpClient
  • work with updateOn to delay form validation for template driven forms
  • work with updateOn to delay form validation for reactive forms
  • use Angular CLI to set up an app with service worker support
  • set up caching of external resources and data
  • perform a lazy load of an Angular module
  • use the new features and capabilities of Angular 5

Overview/Description
Angular 5 is an update to Angular 4 that contains some very powerful new features and capabilities, as well as several bug fixes. In this course, you will learn about the new features of Angular 5.

Target Audience
Angular developers, web designers, and architects building or designing web sites using Angular 5 or upgrading a site to Angular 5

Angular 5 Material and Universal Components

Course Number:
sd_angf_a03_it_enus
Lesson Objectives

Angular 5 Material and Universal Components

  • start the course
  • describe the Angular Material components and how they can be used in an Angular app
  • install and setup Angular Material and the Angular CDK
  • install and use Gesture Support and the optional Material Icons
  • use the Material Checkbox and Radio button components
  • use the Material Slide toggle and Slider components
  • work with the Menu and Toolbar components
  • use the Material Sidenav and Drawer components
  • display visual data using Material icons and tooltips
  • display an Angular Material Snackbar
  • display and show progress using the Progress spinner and Progress bar components
  • structure and display a Material Table
  • describe the Angular Universal components and how server-side rendering can be used
  • prepare an Angular CLI-based application to be run through Angular Universal
  • build an Angular CLI app and an express-based server that can render the app server-side
  • install and use Angular Material Components

Overview/Description
Angular Material provides components for managing the user interface and Angular Universal allows apps to render server-side which can help with performance and SEO. Both components are powerful add-ons for Angular development.

Target Audience
Software developers already familiar with Angular 2 or newer

Angular 5 Material and Universal Components

Course Number:
sd_angf_a03_it_enus
Lesson Objectives

Angular 5 Material and Universal Components

  • start the course
  • describe the Angular Material components and how they can be used in an Angular app
  • install and setup Angular Material and the Angular CDK
  • install and use Gesture Support and the optional Material Icons
  • use the Material Checkbox and Radio button components
  • use the Material Slide toggle and Slider components
  • work with the Menu and Toolbar components
  • use the Material Sidenav and Drawer components
  • display visual data using Material icons and tooltips
  • display an Angular Material Snackbar
  • display and show progress using the Progress spinner and Progress bar components
  • structure and display a Material Table
  • describe the Angular Universal components and how server-side rendering can be used
  • prepare an Angular CLI-based application to be run through Angular Universal
  • build an Angular CLI app and an express-based server that can render the app server-side
  • install and use Angular Material Components

Overview/Description
Angular Material provides components for managing the user interface and Angular Universal allows apps to render server-side which can help with performance and SEO. Both components are powerful add-ons for Angular development.

Target Audience
Software developers already familiar with Angular 2 or newer

Bootstrap and Dashboards with Angular 5

Course Number:
sd_angf_a02_it_enus
Lesson Objectives

Bootstrap and Dashboards with Angular 5

  • start the course
  • describe the native Angular directives ng-bootstrap provides and why it should be used
  • install the ng-bootstrap module and its dependencies
  • import and set up ng-bootstrap in an Angular 5 application
  • use the ngbButton and ngbButtonLabel directives to implement buttons
  • use the ngb-alert directive component to set up alerts in an Angular app
  • use the ngb-progressbar component to implement progress bars in an Angular app
  • use ngb-carousel and ngbSlide to set up dynamic carousels in an Angular app
  • use the ngb-rating component to implement a user-editable ratings widget in an Angular app
  • use the Bootstrap Collapse and Modal
  • describe Amexio and how it can be used for creating dashboards
  • install Amexio and it dependencies and use it in an Angular AppModule
  • configure and use the Amexio button component in an Angular app
  • work with the Amexio Data Grid component
  • use the Amexio Gauge component to create dashboard views
  • use the Amexio bar chart component to create a bar chart view in an Angular app
  • use the CandleStick chart component
  • create a combo chart to visualize data in an Angular app
  • visualize time-based datasets in an Angular app using the Amexio Timeline Chart component
  • set up data in a tree view structure using the Amexio Tree View component
  • install the Bootstrap and Amexio modules for use in an Angular app

Overview/Description
ng-bootstrap makes using Bootstrap feel native within Angular, and Amexio components can make it simple to create a data-rich dashboard. In this course, you will learn how these two components can be used to create dashboards.

Target Audience
Angular developers, web designers, and architects building or designing web sites using Angular 5 or upgrading a site to Angular 5

Bootstrap and Dashboards with Angular 5

Course Number:
sd_angf_a02_it_enus
Lesson Objectives

Bootstrap and Dashboards with Angular 5

  • start the course
  • describe the native Angular directives ng-bootstrap provides and why it should be used
  • install the ng-bootstrap module and its dependencies
  • import and set up ng-bootstrap in an Angular 5 application
  • use the ngbButton and ngbButtonLabel directives to implement buttons
  • use the ngb-alert directive component to set up alerts in an Angular app
  • use the ngb-progressbar component to implement progress bars in an Angular app
  • use ngb-carousel and ngbSlide to set up dynamic carousels in an Angular app
  • use the ngb-rating component to implement a user-editable ratings widget in an Angular app
  • use the Bootstrap Collapse and Modal
  • describe Amexio and how it can be used for creating dashboards
  • install Amexio and it dependencies and use it in an Angular AppModule
  • configure and use the Amexio button component in an Angular app
  • work with the Amexio Data Grid component
  • use the Amexio Gauge component to create dashboard views
  • use the Amexio bar chart component to create a bar chart view in an Angular app
  • use the CandleStick chart component
  • create a combo chart to visualize data in an Angular app
  • visualize time-based datasets in an Angular app using the Amexio Timeline Chart component
  • set up data in a tree view structure using the Amexio Tree View component
  • install the Bootstrap and Amexio modules for use in an Angular app

Overview/Description
ng-bootstrap makes using Bootstrap feel native within Angular, and Amexio components can make it simple to create a data-rich dashboard. In this course, you will learn how these two components can be used to create dashboards.

Target Audience
Angular developers, web designers, and architects building or designing web sites using Angular 5 or upgrading a site to Angular 5

Close Chat Live